<template >
  <div>
    <el-dialog
      title="房屋列表"
      append-to-body
      :visible.sync="showInfo"
      :page.sync="page"
      top="3%"
      width="60%"
      class="checkInfoNation"
      :before-close="closeHouseInfo"
    >
      <avue-crud :data="datas" :option="option">
        <!-- <template slot="menuLeft">
          <el-button type="primary" size="small" @click="getData()">
            导出数据
          </el-button>
        </template> -->
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="delHouse(row)">
            移除该房屋
          </el-button>
        </template>
        <template slot="jzmc" slot-scope="{ row }">
          <span v-if="row.jzmc">{{ row.jzmc }}</span>
          <span v-else>/</span>
        </template>
        <template slot="dscs" slot-scope="{ row }">
          <span v-if="row.dscs">{{ row.dscs }}</span>
          <span v-else-if="row.cs">{{ row.cs }}</span>
          <span v-else>/</span>
        </template>
        <template slot="mj" slot-scope="{ row }">
          <span v-if="row.mj">{{ row.mj }}</span>
          <span v-else>/</span>
        </template>
        <template slot="gd" slot-scope="{ row }">
          <span v-if="row.gd">{{ row.gd }}</span>
          <span v-else>/</span>
        </template>
        <template slot="gd" slot-scope="{ row }">
          <span v-if="row.gd">{{ row.gd }}</span>
          <span v-else>/</span>
        </template>
        <template slot="jg" slot-scope="{ row }">
          <span v-if="row.jglx == 1">砖石结构</span>
          <span v-else-if="row.jglx == 2">土木结构</span>
          <span v-else-if="row.jglx == 3">混杂结构</span>
          <span v-else-if="row.jglx == 4">窑洞</span>
          <span v-else-if="row.jglx == 5">钢筋混凝土结构</span>
          <span v-else-if="row.jglx == 6">钢结构</span>
          <span v-else-if="row.jglx == 99">其他</span>
          <span v-else-if="row.czfwjglx == 1">砌体结构</span>
          <span v-else-if="row.czfwjglx == 4">钢结构</span>
          <span v-else-if="row.czfwjglx == 5">木结构</span>
          <span v-else-if="row.czfwjglx == 9999">其他</span>
          <span v-else>/</span>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeHouseInfo">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { submit } from '../../api/gis'
export default {
  name: 'mapInfo',
  props: ['showInfo', 'datas', 'fwlb', 'terrainType'],
  data() {
    return {
      datas: [], //数据源
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      fwlb: '',
      terrainType: '',
      showInfo: false,
      option: {
        menu: true,
        border: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        index: true,
        indexLabel: '序号',
        column: [
          {
            label: '房屋编号',
            prop: 'fwbh',
            display: false,
          },
          {
            label: '地址',
            prop: 'address',
            display: false,
          },
          {
            label: '房屋名称',
            prop: 'jzmc',
            slot: true,
            display: false,
          },
          {
            label: '地上层数',
            prop: 'dscs',
            slot: true,
            display: false,
          },
          {
            label: '建筑面积',
            prop: 'mj',
            slot: true,
            display: false,
          },

          {
            label: '高度',
            prop: 'gd',
            slot: true,
            display: false,
          },
          {
            label: '结构类型',
            prop: 'jg',
            slot: true,
            display: false,
          },
        ],
      },
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.$nextTick(()=>{
            this.datas = newVal
          })
        }
      },
      immediate: true,
    },
    fwlb: {
      handler(newVal) {
        if (newVal) {

          this.fwlb = newVal
        }
      },
      immediate: true,
    },
    terrainType: {
      handler(newVal) {
        if (newVal) {
          this.terrainType = newVal
        }
      },
      immediate: true,
    },
    showInfo: {
      handler(newVal) {
        if (newVal) {
          this.showInfo = newVal
        }
        this.page.total = this.datas.length
        console.log(this.page)
      },
      immediate: true,
    },
  },

  methods: {
    //关闭弹窗
    closeHouseInfo() {
      this.showInfo = false
      this.datas = []
      this.fwlb = ''
      this.terrainType = ''
      this.$emit('closeHouse', this.showInfo)
    },
    delHouse(row) {
      console.log(row)
      this.$nextTick(()=>{
        for (let i = 0; i < this.datas.length; i++) {
          console.log('下标', row.fwbh == this.datas[i].fwbh)
          if (row.fwbh == this.datas[i].fwbh) {
            this.datas.splice(i, 1)
          }
        }
      })

    },
    submitInfo() {
      let ids = []
      if (this.datas.length > 0) {
        this.datas.forEach((res) => {
          ids.push(res.fwbh)
        })
        var bean = {
          terrainType: this.terrainType,
          fwlb: this.fwlb,
          fwbhList: ids,
        }
        submit(bean).then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.closeHouseInfo()
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        this.closeHouseInfo()
        this.$message.error('请重新添加房屋')
      }
    },
  },
}
</script>

<style scoped>
</style>
